In this step, you will create a new Visual Studio application, add the appropriate references for the project, and add XAML markup to create the C1Barcode control.

1. Create a new Universal Windows application:
   1. Select File | New | Project. The New Project dialog box will open.
   2. Select Templates | Visual C# | Windows | Universal. From the templates list, select Blank App (Universal Windows).
   3. Give your application a Name and select OK. Your new application will open.
2. Right-click the References folder in the Solution Explorer and select Add | New Reference. Expand Universal Windows and select Extensions; you should see the UWP assemblies in the center pane. Select the following assemblies and click OK:
   • C1.UWP.dll
   • C1.UWP.BarCode.dll
3. Create a folder named Resources in your application. Add an image file in this folder. In this example, we are adding c1logo.png.
4. Right-click the Resources folder and select Add | Existing Item. The Add Existing Item dialog box will open.
   1. Locate the image file you would like to add to your application.
   2. Select the file and click OK. The file will be added to the Resources folder.
   3. Rebuild the application so that your file is available to your application.
5. Open the MainPage.xaml file and locate the opening <Page> tag. This tag will include the necessary namespaces. Edit the tag so that it resembles the following markup:

   XAML

   Copy Code

   <Page x:Class="BarCodeQS.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:BarCodeQS" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:c1="using:C1.Xaml.BarCode" xmlns:Xaml="using:C1.Xaml" xmlns:BarCode="using:C1.BarCode" mc:Ignorable="d"> <!-- BarCode.QS is the name of the application, this will be replaced by your app's name -->

   The following namespaces have been added to the tag:

   • xmlns:c1="using:C1.Xaml.BarCode"
   • xmlns:Xaml="using:C1.Xaml"
   • xmlns:BarCode="using:C1.BarCode"

6. Place your cursor between the <Grid></Grid> tags on the page. Add the following XAML markup between the <Grid></Grid> tags to set up the Grid's resources:

   XAML

   Copy Code

   <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" HorizontalAlignment="Left" Width="756"> <Grid.Resources> <Style TargetType="TextBlock"> <Setter Property="FontSize" Value="26.667"></Setter> </Style> <Style TargetType="TextBox"> <Setter Property="FontSize" Value="26.667"></Setter> </Style> <Style TargetType="ComboBox"> <Setter Property="FontSize" Value="26.667"></Setter> </Style> </Grid.Resources>

7. The following markup adds three TextBlock controls, one TextBox and one ComboBox control. When you run your application, you will be able to change the type of BarCode control being displayed:

   XAML

   Copy Code

   <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="10,68,0,617" TextWrapping="Wrap" Text="CodeType:" VerticalAlignment="Center"/> <TextBox x:Name="text" Text="{Binding Text, ElementName=barcode, UpdateSourceTrigger=PropertyChanged, FallbackValue='', Mode=TwoWay}" HorizontalAlignment="Left" Margin="157,172,0,0" TextWrapping="Wrap" VerticalAlignment="Top" TextChanged="text_TextChanged" Width="400" Height="57" /> <ComboBox x:Name="cbCodeType" HorizontalAlignment="Left" Margin="157,64,0,0" VerticalAlignment="Top" Width="400" RenderTransformOrigin="0.66,-4.493" SelectionChanged="cbCodeType_SelectionChanged" Grid.ColumnSpan="3"/> <TextBlock x:Name="textBlock1" HorizontalAlignment="Left" Margin="48,182,0,503" TextWrapping="Wrap" Text="Text:" VerticalAlignment="Center"/> <TextBlock x:Name="textBlock2" HorizontalAlignment="Left" Margin="41,421,0,0" TextWrapping="Wrap" Text="Barcode:" VerticalAlignment="Top"/>

8. Next, add the markup for the C1BarCode control, below the markups added in previous step. This markup will set the type of BarCode the application will display when you run it:

   XAML	Copy Code
   <c1:C1BarCode x:Name="barcode" HorizontalAlignment="Left" Margin="258,373,0,0" VerticalAlignment="Top" CodeType="QRCode" CaptionPosition="Below" Text="https://www.google.com"> <c1:C1BarCode.QRCodeOptions> <BarCode:QRCodeOptions ErrorLevel="High"/> </c1:C1BarCode.QRCodeOptions> </c1:C1BarCode>

9. Now, use the below markup to add the image file, which you added in step 3:

   XAML	Copy Code
   <Image Source="../../Resources/c1logo1.png" x:Name="image" Width="70" Height="70" Grid.Column="1" Margin="82,316,0,334" />

You have completed Step 1 of this Quick Start. In this step, you created a new application, added references, and used XAML markup to set up your application. In the next step, you will add code to your application.